<template>
    <van-nav-bar title="人工智能客服" left-text="" left-arrow @click-left="goBack" />
    <div class="box">
      <div class="chatbox">
        <div v-for="(message, index) in messages" :key="index" :class="`content ${message.type}`" >
          <img class="img" :src="message.type === 'right' ? `${LoginUser.avatar_text}` : '/assets/images/robot.png'" alt="">
          <p id="text">{{ message.text }}</p>
        </div>
      </div>
      <div class="footer">
        <input type="text" id="chat" v-model="message" placeholder="在这里输入文字">
        <button type="button" id="submit" @click="sendMessage">发送</button>
      </div>
    </div>
</template>
<script setup>
import { POST } from '@/services/request.js';
import { onBeforeMount } from 'vue';
const { proxy } = getCurrentInstance()
const LoginUser = reactive(proxy.$cookies.get('LoginUser') ? proxy.$cookies.get('LoginUser') : {})
const goBack = () => { proxy.$router.go(-1) }
// 定义响应式数据
const message = ref(''); // 用户输入的消息
const messages = ref([]); // 存储所有消息

onBeforeMount(() => {
    messages.value.push({
        type: 'left',
        text: '您好！我是菲菲，非常欢迎您的到来，有什么想和我聊聊的吗？'
    });
})
// 发送消息的方法
const sendMessage = async () => {
    const userMessage = message.value.trim();
    if (!userMessage) return; // 如果输入为空，不发送

    // 添加用户的消息
    messages.value.push({
        type: 'right',
        text: userMessage
    });

    // 清空输入框
    message.value = '';

    // 发送消息到服务器
    const result = await POST({
        url: '/product/cs',
        params: {
            userMessage:userMessage
        }
    })

    if (result.data.code === 0) {
        alert(result.data.msg);
        return;
    }

    // 添加机器人的回复
    messages.value.push({
        type: 'left',
        text: result.data.data
    });

};
</script>

<style scoped>
    *{
        padding: 0;
        margin: 0;
    }
    .box{
        overflow: auto;
        background-color: #f6f3f3;
    }
    .head{  
        position: fixed;
        height: 9%;
        width: 100%;
        background-color: #474646;
        text-align: center;
        font-size: 1.5rem;
        line-height: 4rem;
        color: #fff;
    }
    .chatbox{
        height: 40rem;
        background-color: #f6f3f3;
    }
    .footer{
        position: fixed;
        bottom: 0;
        height: 8%;
        width: 100%;
        background-color: #cac3c3;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
    #chat{
        height: 2.5rem;
        width: 70%;
        border-radius: 2.5rem;
        border: none;
        text-indent: 15px;
        font-size: 1rem;
        border: #1b0b0b;
    }
    #chat:focus{
        outline-style: none;
    }
    #submit{
        width: 15%;
        font-size: 1rem;
        color: #fff;
        text-align: center;
        line-height: 2rem;
        background-color: rgb(40, 227, 40);
        border: none;
    }
    #submit:focus{
        outline-style: none;
    }
    .content{
        margin-top: 1rem;
        display: flex;
    }
    .right{
        margin-left: 12%;
        flex-direction: row-reverse;
    }
    .left{
        margin-right: 12%;
    }
    .img{
        margin: 0 1rem;
        height: 2.5rem;
        width: 2.5rem;
        border-radius: 50%;
        object-fit: cover;
    }
    #text{
        box-sizing: border-box;
        padding: 0.5rem;
        border-radius: 6px;
        background-color: #fff;
        border: 1px solid #cbc7c7;
        line-height: 20px;
        font-size: 16px;
    }
</style>